<template>
  <div class="select">
      <section v-for="(v,i) in arr" :key="i">
          <img :src="v.src" alt="">
          <p>{{v.name}}</p>
      </section>
  </div>
</template>

<script>
export default {
    mounted(){
        let a = document.querySelector('section');
        a.children[0].setAttribute("src",this.newarr[0].src);
    },
    data(){
        return {
            newarr:[
                {src:"/img/fenxiao_03.jpg",name:"淘宝"},
                {src:"/img/fenxiao_04.jpg",name:"拼多多"},
                {src:"/img/fenxiao_05.jpg",name:"京东"},
                {src:"/img/fenxiao_10.jpg",name:"其他"},
            ],
            arr:[
                {src:"/img/fenxiao_08.jpg",name:"淘宝"},
                {src:"/img/fenxiao_06.jpg",name:"拼多多"},
                {src:"/img/fenxiao_07.jpg",name:"京东"},
                {src:"/img/fenxiao_09.jpg",name:"其他"},
            ],
        }
    }
}
</script>

<style scoped>
.select{
    height: 63.5rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
section{
    text-align: center;
}
img{
    width: 27rem;
    height: 27rem;
    border-radius: 5rem;
    margin-bottom: 4.3rem;
}
</style>